<template>
  <!-- %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%-->
  <!--                    界面2特有的密码登陆部分，css放login-2.css里面-->
  <section class="login-password">
    <!--                    表单-->
    <form>
      <input class="login-info" type="text" placeholder="请输入手机号码/邮箱/ID号" v-model="account">
      <input class="login-info" type="password" placeholder="请输入密码" v-model="password">
    </form>
    <p class="forget-password">忘记密码?</p>
    <div class="login-treaty">
      <input type="checkbox" name="scales" id="checkbox" v-model="checked"/>
      <label for="scales">我已阅读并同意<span>《用户协议》</span>和<span>《隐私政策》</span></label>
    </div>
    <input type="button" class="login-button" value="登录" @click="accountLogin">
  </section>

</template>

<script setup>

import {ref} from "vue";
import {userLoginByPassword} from "../../../api/UserApi.js";
import {pageStore} from "../../../store/page.js";
import {ElMessage} from "element-plus";
import {userStore} from "../../../store/userState.js";



const page_store = pageStore()

const account = ref('')
const password = ref('')

const checked = ref(false)

const accountLogin = async ()=>{

  if (!checked.value) {
    ElMessage({
      showClose: true,
      message: '请同意《用户协议》与《隐私政策》',
      type: 'warning',
    })
    return
  }

  // 发送请求登录请求
  const res = await userLoginByPassword(account.value,password.value);
  // 校验请求是否成功
  if (res.code === 200) {
    userStore().setLoginUser(res.data.token,res.data.expireTime,res.data.userLoginInfoVo)
    page_store.setLoginPageStatus(false)
    location.reload()
  }
}

</script>

<style scoped>
/*界面2特有的密码登陆部分*/
.login-password{
  width: 25rem;
  /*height: 40px;*/
  margin: 0 auto;
  margin-top: 7.5rem;
}
.login-info{
  width:25rem;
  height:4rem;
  -webkit-appearance:none;
  -moz-appearance: none;
  border-radius: 5px;
  outline:0;
  padding: 0 2rem;
  letter-spacing: 1px;
  border: 1px solid rgba(229, 229, 229, 1);
}
.login-info:not(:first-child){
  margin-top: 2rem;
}
.forget-password{
  color:rgba(166, 166, 166, 1);
  font-size: 1rem;
  margin-top: 1rem;
}
.forget-password{
  letter-spacing: 1px;
  line-height: 1rem;
  text-align: right;
}

.login-treaty{
  color: rgba(0, 0, 0, 1);
  font-size: 1.1rem;
  margin-top: 1rem;
  position: relative;
}
.login-treaty input{
  position: absolute;
  top:15%;
  left:0;
}
.login-treaty label{
  margin-left: 2rem;
}
.login-treaty label span{
  color: rgba(156, 0, 0, 1);
}
.login-button{
  width:25rem;
  height:4rem;
  text-align: center;
  line-height: 4rem;
  background: rgba(156, 0, 0, 1);
  color:rgba(255, 255, 255, 1);
  font-weight: bold;
  font-size: 1.6rem;
  cursor: pointer;
  border: 0;
  border-radius: 2rem;
  margin-top: 3.5rem;
}
/*@keyframes tran {*/
/*    0%{*/
/*        transform: translateX(0px) translateY(0px);*/
/*    }*/
/*    50%{*/
/*        transform: translateX(1px) translateY(1px);*/
/*    }*/
/*    100%{*/
/*        transform: translateX(0px) translateY(0px);*/
/*    }*/
/*}*/
/*.login-button:focus{*/
/*    outline: none;*/
/*    animation:tran 0.2s linear;*/
/*}*/
</style>
